<template>
    <div>
			<div id="chartsId2" :style="{width: '900px', height: '500px'}" class="my-chart"></div>
    </div>
</template>

<script>
    export default {
			props: ['data', 'name', 'val'],
			data(){
				return {

				}
			},
			watch: {
				data(){
					let hotData = this.data['口碑指数：'];
					let name = this.name;
					let val = this.val;
					console.log('hotData: ', hotData);
					let myChart = this.$echarts.init(document.getElementById('chartsId2'));
					myChart.setOption({
						legend: {
							data: name
						},
						series: function(){
							let arr = [];
							for(let i = 0; i < val.length; i++){
								let obj = {};
								obj.name = name[i];
								let varName = 'benpin_' + val[i];
								obj.data = hotData[varName];
								obj.type = 'line';
								arr.push(obj);
							}
							return arr;
						}()
					})
				}
			},
			mounted () {
				let myChart = this.$echarts.init(document.getElementById('chartsId2'));
				myChart.setOption({
					title: {
						text: '口碑指数'
					},
					legend: {
							data:['邮件营销','联盟广告']
					},
					tooltip: {
							trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: function(){
                  let list = [];
                  let year = new Date().getFullYear();//当前年
                  let month = new Date().getMonth()+1;//当前月
                  month = month + 12; 
                  //生成x轴坐标
                  for(let i = 1; i <= 6; i++){
                    if((month-i)/12 == 1) --year;
                    let temMonth = (month-i) % 12;
                    if(temMonth == 0) temMonth = 12;
                    let item = year + '-' + temMonth;
                    list.unshift(item);
                  }
                  return list;
              }(),
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '邮件营销',
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line'
					},{
						name: '联盟广告',
						data: [840, 632, 301, 634, 490, 130, 320],
						type: 'line'
					}]
				})
			}
    }
</script>

<style scoped>

</style>